<script setup lang="ts" name="Navigator">//setup语法糖
import { ref, reactive, toRefs, toRef, computed, watch, watchEffect, defineExpose, defineProps, withDefaults, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
import { type Persons } from '@/types'
let name = ref('zhangsan') //ref响应式(RefImpl对象): 基本类型(数字,字符串), 对象(层级不深)
let cars = ref({ brand: '奔驰', price: 100 }) //ref对象(层级不深)
let car = reactive({ brand: '奔驰', price: 100 }) //reactive相应式(Proxy代理函数): 只能对象数组(层级深)
let { brand, price } = toRefs(car) //toRefs: 将reactive中k-v全转为ref,解构赋值为响应式(ObjectRefImpl)
let brands = toRef(car, 'brand') //toRef: 将reactive中某个k-v转为ref
let computedResult = computed({ //计算属性(ref响应式)
  get() {
  },
  set(val) {
  }
})
const stopWatch = watch(name, (newValue, oldValue) => { //监视ref基本类型,不写.value

})
watchEffect(() => { //自动监视:不用指定监视谁,用到就监视,立即监视(一上来就监视)

})
function generalMethod() { //一般方法

}

defineExpose({ name, car }) //ref让父拿到子的对象(默认拿不到,受保护了)

// let lists = defineProps(['list']) //props子接收数据,(defineProps等宏函数不需引入)
// console.log(lists)
// console.log(lists.list)
withDefaults(defineProps<{ list?: Persons }>(), { //?可传可不传,限制类型,withDefaults不传的默认值
  list: () => [{ id: '1', name: 'zhangsan', age: 18 }] //默认值
})
</script>

<template> <!--template不编译-->
  <div class="component-name"> <!--vue3无需根标签-->
    <h1>导航栏</h1>
    {{ list }}
  </div>
  <div class="component-name">
  </div>
</template>

<style lang="less" scoped>
 //less嵌套写法,scoped域:样式只对当前组件有效
 .component-name {}
</style>